import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import React from 'react';
import { useCourseStore } from '../../../store/CourseStore';
import { useNavigation } from '@react-navigation/native';
import { useVideoPlayerStore } from '../../../store/VideoPlayer';

const DirectorySreen = () => {
  const { courseList } = useCourseStore();
  const { VideoPlayerIndex, setVideoPlayerIndex, setVideoPlayerSrc } =
    useVideoPlayerStore();

  const navigate = useNavigation();
  const pressToVideo = index => {
    setVideoPlayerIndex(index);
    if (index === 0) {
      setVideoPlayerSrc(
        'https://cdn.coverr.co/videos/coverr-premium-man-strumming-his-guitar-6025/720p.mp4',
      );
    } else {
      setVideoPlayerSrc(
        'https://cdn.coverr.co/videos/coverr-premium-surfer-gets-into-waves/720p.mp4',
      );
    }
    navigate.navigate('CourseVideoPlay');
  };

  return (
    <View>
      {courseList.map(item => {
        return (
          <View key={item.id}>
            {/* 一级标题 */}
            <Text style={styles.OneTitle}>{item.title}</Text>
            {item.children?.map((node, index) => {
              return (
                <TouchableOpacity
                  style={styles.TwoTitle}
                  key={node.id}
                  onPress={() => {
                    pressToVideo(index);
                  }}
                >
                  <Image
                    style={styles.ImageSrc}
                    source={require('../../../static/video.png')}
                  />
                  <Text
                    style={[
                      styles.TwoTitle_Text,
                      VideoPlayerIndex === index && styles.TwoTitle_Active,
                    ]}
                  >
                    {node.title}
                  </Text>
                </TouchableOpacity>
              );
            })}
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  OneTitle: {
    //一级标题样式
    paddingTop: 10,
    paddingBottom: 10,
  },
  TwoTitle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  TwoTitle_Active: {
    // backgroundColor: '',
    color: '#00aeec',
  },
  TwoTitle_Text: {
    paddingTop: 5,
    paddingBottom: 5,
    flex: 1,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  ImageSrc: {
    width: 20,
    height: 20,
    marginRight: 10,
  },
});

export default DirectorySreen;
